<template>
  <div class="container">
    <LuckyWheel
      ref="myLucky"
      width="88vw"
      height="88vw"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="onStart"
      @end="onEnd"
    />
    <van-dialog :value="visible" title="请输入金额后开启抽奖大转盘" theme="round-button" @confirm="handleConfirm">
      <van-field
        v-model="num"
        type="number"
        class="text-center"
        placeholder="请输入金额"
        border
        autofocus
      />
    </van-dialog>
  </div>
</template>

<script>
import luckyBg from '@/static/bg.png'
import noPrice from '@/static/no-price.png'
import btn from '@/static/btn.png'
import priceIcon from '@/static/price-icon.png'
export default {
  name: 'IndexPage',
  data () {
    return {
      luckyBg,
      noPrice,
      btn,
      priceIcon,
      blocks: [
        {
          padding: '8vw',
          // background: '#869cfa',
          imgs: [
            {
              src: require('@/static/bg.png'),
              width: '88vw',
              height: '88vw',
              top: 0,
              rotate: false
            }
          ]
        }
      ],
      buttons: [
        { radius: '40%', background: 'transparent' },
        { radius: '35%', background: 'transparent' },
        {
          background: 'transparent',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-3.2vw', fontColor: '#fff' }],
          imgs: [
            {
              src: require('@/static/btn.png'),
              top: '-12vw',
              width: '27vw',
              height: '29vw'
            }
          ]
        }
      ],
      visible: false,
      num: '',
      price: 0,
      randomInt: 0,
      running: false,
      gameEnd: false
    }
  },
  computed: {
    prizes () {
      const price = (this.price * 0.1).toFixed(1)
      return [
        { background: '#b8c5f2', fonts: [{ text: `优惠${(price * 1).toFixed(1)}元`, top: '4vw', fontColor: '#FF4848' }], imgs: [{ src: require('@/static/price-icon.png'), width: '13.33vw', height: '13.33vw', top: '8.4vw' }] },
        { background: '#e9e8fe', fonts: [{ text: `优惠${(price * 0.8).toFixed(1)}元`, top: '4vw', fontColor: '#FF4848' }], imgs: [{ src: require('@/static/price-icon.png'), width: '13.33vw', height: '13.33vw', top: '8.4vw' }] },
        { background: '#b8c5f2', fonts: [{ text: `优惠${(price * 0.6).toFixed(1)}元`, top: '4vw', fontColor: '#FF4848' }], imgs: [{ src: require('@/static/price-icon.png'), width: '13.33vw', height: '13.33vw', top: '8.4vw' }] },
        { background: '#e9e8fe', fonts: [{ text: `优惠${(price * 0.4).toFixed(1)}元`, top: '4vw', fontColor: '#FF4848' }], imgs: [{ src: require('@/static/price-icon.png'), width: '13.33vw', height: '13.33vw', top: '8.4vw' }] },
        { background: '#b8c5f2', fonts: [{ text: `优惠${(price * 0.3).toFixed(1)}元`, top: '4vw', fontColor: '#FF4848' }], imgs: [{ src: require('@/static/price-icon.png'), width: '13.33vw', height: '13.33vw', top: '8.4vw' }] },
        { background: '#e9e8fe', fonts: [{ text: `优惠${(price * 0.2).toFixed(1)}元`, top: '4vw', fontColor: '#FF4848' }], imgs: [{ src: require('@/static/price-icon.png'), width: '13.33vw', height: '13.33vw', top: '8.4vw' }] }
      ]
    }
  },
  mounted () {
    this.visible = true
  },
  methods: {
    onStart () {
      if (this.gameEnd) {
        return this.$toast('只能参与一次游戏')
      }
      if (this.running) {
        return
      }
      this.running = true
      this.$refs.myLucky.play()
      setTimeout(() => {
        function getRandomInt (min, max) {
          min = Math.ceil(min)
          max = Math.floor(max)
          return Math.floor(Math.random() * (max - min + 1)) + min
        }

        const randomInt = getRandomInt(0, 5)

        this.$refs.myLucky.stop(randomInt)
        this.randomInt = randomInt
      }, 3000)
    },
    onEnd () {
      // console.log('end')
      const arr = [1, 0.8, 0.6, 0.04, 0.3, 0.2]
      this.$dialog({
        message: `恭喜您获得优惠${(this.price * 0.1 * arr[this.randomInt]).toFixed(1)}`
      })
      this.gameEnd = true
    },
    handleConfirm () {
      if (!this.num) {
        return this.$toast('请输入正确的数字金额')
      }
      this.price = this.num
      this.visible = false
    }
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ceshi {
  height: 800px;
  width: 600px;
  border-width: 80px 10px 80px 10px;
  border-style: solid;
  border-image-source: url(../static/test.png);
  border-image-slice: 130 15 130 25 fill;
    border-image-repeat: stretch;
}
.title {
  font-family:
    Quicksand,
    "Source Sans Pro",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
.van-field__control {
  text-align: center;
}
</style>
